<template>
    <el-container>
        <vHeadSpace />
        <el-container>
            <vAsideSpace />
            <el-container>
                <el-main class="main">
                    <el-row type="flex">
                        <el-col :span="6">
                            <el-card class="left-card">
                                <div slot="header" class="clearfix" style="height:60px">
                                    <span style="position:relative; margin: 20px 0px 0px 10px; font-size: 25px">知识类别</span>
                                    <el-button style="position:relative; margin: 15px 0px 0px 200px;" type="warning"  size="mini" @click="resetFilter">所有类别</el-button>
                                </div>
                                <el-tree
                                        ref="tree"
                                        :data="typeOptions"
                                        :props="defaultProps"
                                        node-key="id"
                                        accordion
                                        @node-click="handleNodeClick">
                                    <span class="custom-tree-node" slot-scope="{ node }">
                                            <span>
                                                <i class="el-icon-folder"></i>{{ node.label }}
                                            </span>
                                    </span>
                                </el-tree>
                            </el-card>
                        </el-col>
                        <el-col :span="18">
                            <el-card class="right-card">
                                <div slot="header" class="clearfix">
                                    <div class="header_top">
                                        <el-row>
                                            <el-col :span="21">
                                                <span style="align-content: center; font-size: 25px; margin-top: 10px">知识列表</span>
                                                <span class="input-suffix">
                                                    <el-button type="primary" size="small" style=" float: right;   margin-left: 10px" @click="searchClick">查询</el-button>
                                                    <el-input  placeholder="请输入标题" size="small" style=" float: right; width: 150px;" class="filter-item" prefix-icon="el-icon-search" v-model="searchTitleText">
                                                    </el-input>
                                                </span>

                                            </el-col>
                                        </el-row>
                                    </div>
                                    <div class="header_botm">
                                        <span style="padding:10px 15px 15px 10px;font-size: 17px;">发现</span>
                                        <el-button style="float: right; padding:7px 5px 15px 20px;" type="text" @click="newestClick">最新</el-button>
                                        <el-button style="float: right; padding:7px 5px 15px 20px; " type="text" @click="mostPorpularClick">最热</el-button>
                                        <!--<el-button style="float: right; padding:3px 5px 15px 20px;" type="text">推荐</el-button>-->
                                    </div>
                                </div>

                                <el-table v-loading="loading"  stripe width="130%" :data="knowledgeList" :row-style="{height:'75px'}"
                                          :cell-style="{padding:'0px'}" :show-header="tableStatus" height="420px">
                                    <!--<el-table-column type="index" align="center" label="序号" width="50" fixed  :index="knowledgeIndexMethod"/>-->
                                    <el-table-column  label="知识名称" width="800" >
                                        <template slot-scope="scope">
                                            <div>
                                                <el-button type="text" @click="detailsInfoClick(scope.row)">{{scope.row.knowledgeName}}</el-button>
                                            </div>
                                            <div v-if="scope.row.problemName != null">
                                                {{scope.row.problemName}}
                                            </div>
                                            <div v-else>
                                                无
                                            </div>
                                            <div align="right">
                                                <span style="font-size: 5px">{{scope.row.submit_user}} 发表于 {{scope.row.submit_time}}</span>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <!--<el-table-column label="类型" width="150" align="center" >-->
                                    <!--    <template slot-scope="scope">-->
                                    <!--        {{getKnowledgeType(scope.row.knowledgeType)}}-->
                                    <!--    </template>-->
                                    <!--</el-table-column>-->
                                    <!--<el-table-column-->
                                    <!--        prop="problemName"-->
                                    <!--        label="解决问题"-->
                                    <!--        align="center"-->
                                    <!--        width="270"-->
                                    <!--        show-overflow-tooltip>-->
                                    <!--</el-table-column>-->
                                    <!--<el-table-column-->
                                    <!--        prop="knowledgeRes"-->
                                    <!--        label="解决方案"-->
                                    <!--        width="200"-->
                                    <!--        align="center"-->
                                    <!--        show-overflow-tooltip>-->
                                    <!--</el-table-column>-->

                                    <!--<el-table-column-->
                                    <!--        prop="closureDir"-->
                                    <!--        label="附件"-->
                                    <!--        width="120"-->
                                    <!--        align="center">-->
                                    <!--    <template slot-scope="scope">-->
                                    <!--        <el-button type="warning" icon="el-icon-share" size="mini" @click="checkClosure(scope.row)">查看附件</el-button>-->
                                    <!--    </template>-->
                                    <!--</el-table-column>-->
                                    <el-table-column label="操作" align="center" width="150">
                                        <template slot-scope="scope">
                                            <div>
                                                <el-tag type="info" size="mini">{{getKnowledgeType(scope.row.knowledgeType)}}</el-tag>
                                            </div>
                                            <div style="font-size: 5px">
                                                <i class="el-icon-view"></i>
                                                {{scope.row.view_count}}
                                            </div>
                                        </template>
                                        <!--<el-button  type="primary" icon="el-icon-more"  size="mini">详情</el-button>-->
                                    </el-table-column>
                                </el-table>
                                <el-pagination
                                        :current-page="currentPage"
                                        :page-sizes="[5, 10, 20, 30]"
                                        :page-size="pageSize"
                                        layout="total,prev, pager, next, jumper"
                                        :total="total"
                                        @current-change="handleCurrentChange"
                                        style="text-align: center"
                                />
                            </el-card>
                        </el-col>
                    </el-row>
                    <!-- 知识详情 -->
                    <div class="info_dialog">
                        <el-dialog title="知识详情" center :visible.sync="detailsInfoVisible" v-if="detailsInfoVisible" width="1000px" :show-close="false">
                            <div style="font-size: 15px; margin-bottom: 20px" >{{detailsInfo.problem}}</div>
                            <div style="font-size: 15px">
                                <span>
                                    {{detailsInfo.name}}
                                </span>
                                发布于
                                <span>{{detailsInfo.submit_time}}</span>
                            </div>
                            <el-divider content-position="center"/>
                            <div>
                                {{detailsInfo.resolution}}
                            </div>
                            <div style="position: relative; margin: 20px 0px 0px 800px ">
                                <el-button   type="text" @click="checkClosure(detailsInfo)">查看附件</el-button>
                            </div>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="infoDialogCancelClick" type="primary">确定</el-button>
                            </div>
                        </el-dialog>
                    </div>
                    <!--  附件列表  -->
                    <div class="closureList">
                        <el-dialog title="附件列表"  :visible.sync="closureDialogvisiable">&nbsp;
                            <!--@row-click="handleSelectionChange"-->
                            <el-table
                                    :data="closureList"
                                    width="100%"
                            >
                                <el-table-column type="index" align="center" label="序号" width="50" />
                                <!--<el-table-column-->
                                <!--        prop="id"-->
                                <!--        label="id"-->
                                <!--        width="150"-->
                                <!--        align="center">-->
                                <!--</el-table-column>-->
                                <el-table-column
                                        prop="name"
                                        label="名称"
                                        width="200"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="user"
                                        label="提交者"
                                        width="150"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="time"
                                        label="提交时间"
                                        width="150"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        label="下载"
                                        width="170"
                                        align="center">
                                    <template slot-scope="scope">
                                        <el-button  type="primary" icon="el-icon-edit" size="mini" @click="download(scope.row)">下载</el-button>
                                        <!--<a download="true" @click='download(scope.row)' style="cursor:pointer;"-->
                                        <!--&gt;<i  aria-hidden="true" style="color: #326EDC;">下载</i>-->
                                        <!--</a>-->
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-dialog>
                    </div>
                </el-main>
                <vFootSpace />
            </el-container>
        </el-container>
    </el-container>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "KnowledgeBaseInventory",
        data(){
            return {
                // 主页面的知识列表
                knowledgeList: [],
                defaultProps: {
                    children: 'children',
                    label: 'typeName',
                    id:'typePId'
                },
                // 知识分类的value->label
                knowledgeTypeList: [],
                typeOptions:[],
                // 主页分页参数
                currentPage: 1,
                pageSize: 5,
                // 知识总数
                total: 0,
                // 知识分类query
                queryInfo: {
                    type: 3
                    // pagenum: 1,
                    // pagesize: 5
                },
                // 加载显示效果
                loading: false,
                // 表头可见
                tableStatus: false,
                // 类型列表转换(带有父节点)
                type_list: [],
                // 当前展示的类型
                currentType: -1,
                // 最热或者最新
                currentViewType: -1,
                // 详情表单可见性
                detailsInfoVisible: false,
                // 详情列表数据
                detailsInfo:{
                    name: '',
                    submit_user: '',
                    submit_time: '',
                    view_count: 0,
                    key_word: '',
                    resolution: '',
                    knowledgeid: 0,
                    problem: '',
                    closureDir: '',
                    closureID: '',
                    closure_sub_time: '',
                    closure_sub_user: ''
                },
                //附件列表
                closureList: [],
                // 附件列表可见性
                closureDialogvisiable: false,
                // 文本搜索
                searchTitleText: ''
            }
        },
        mounted(){
            // 初始化知识列表和分类列表
            this.findAllKnowledge()
            this.getAllKnowledgeType()
        },
        methods:{
            handleNodeClick(data) {
                if (data.children == null) {
                    this.currentPage = 1
                    this.currentViewType = -1
                    this.currentType = data.typeId
                    this.$axios({
                            method: "post",
                            url: "/konwledgeBase/getAllKonwledge.action",
                            params: {
                                approvalStatus: 1,
                                viewType: -1,
                                typeId: data.typeId,
                                currentPage: this.currentPage,
                                pageSize: this.pageSize,
                                searchText: this.searchTitleText
                            }
                        }).then(res =>{
                        this.knowledgeList = res.data.content.knowledgeList
                        this.total = res.data.content.totalNum
                        console.log(this.knowledgeList);
                    })
                }

            },
            // 查询所有知识列表
            findAllKnowledge() {
                this.$axios({
                    method: "post",
                    url: "/konwledgeBase/getAllKonwledge.action",
                    params: {
                        approvalStatus: 1,
                        viewType: this.currentViewType,
                        typeId: this.currentType,
                        currentPage: this.currentPage,
                        pageSize: this.pageSize,
                        searchText: this.searchTitleText
                    }
                }).then(res => {
                    this.knowledgeList = res.data.content.knowledgeList
                    this.total = res.data.content.totalNum
                    console.log(this.knowledgeList);
                    // console.log('this.total',this.total);
                })
            },
            // 获取分类列表
            getAllKnowledgeType(){
                axios.post('/konwledgeBase/get_all_type.action', {params: this.queryInfo}).then((res) => {
                    if (res.data.status) { // 执行成功
                        this.typeOptions = res.data.content.result
                        this.getTreeData(this.typeOptions)
                        // console.log(this.knowledgeTypeList)
                    } else { // 执行失败
                        // 弹出提示
                        this.$message.error('获取知识类型失败！')
                    }
                })

            },
            // 分页
            handleCurrentChange(currentPage){
                //换页
                // 设置最新的页码
                this.currentPage = currentPage
                this.findAllKnowledge()
            },
            // 首页页面显示数量
            handleSizeChange(val){
                this.pageSize = val
                this.findAllKnowledge()
            },
            // 知识首页序号连续
            knowledgeIndexMethod(index) {
                return index + (this.currentPage-1) * this.pageSize + 1;
            },
            // 查看附件
            checkClosure(val) {
                console.log(val)
                if (val.closureDir != null) {
                    this.closureList = []
                    this.closureDialogvisiable = true
                    var tempLen = val.closureDir.split(",").length
                    for (let i = 0; i < tempLen; i++) {
                        var closure_sub_user = val.closure_sub_user.split(",")[i]
                        var closure_sub_time = val.closure_sub_time.split(",")[i]
                        var tempDir = val.closureDir.split(",")[i]
                        var obj = {
                            dir: tempDir,
                            name: tempDir.substring(tempDir.lastIndexOf("_")+1),
                            id: val.closureID.split(",")[i],
                            user:closure_sub_user,
                            time:closure_sub_time
                        }
                        this.closureList.push(obj)
                        // console.log(this.closureList);
                    }
                }else {
                    this.$message.warning("当前知识无附件！")
                }
            },
            //获取具体知识类型
            getKnowledgeType(typeStr) {
                var lastType = typeStr.substring(typeStr.lastIndexOf(',')+1)
                for (let i = 0; i < this.knowledgeTypeList.length; i++) {
                    if (this.knowledgeTypeList[i].id == lastType){
                        return this.knowledgeTypeList[i].name
                    }
                }
            },
            // 递归函数
            getTreeData(datas) {
                for(var i in datas){
                    var id = datas[i].typeId
                    var name = datas[i].typeName
                    this.knowledgeTypeList.push({id:id,name:name})
                    if(datas[i].children){
                        this.getTreeData(datas[i].children);
                    }
                }
            },
            // 按照时间排序查询
            newestClick(){
                this.currentPage = 1
                this.currentViewType = 2
                this.$axios({
                    method: "post",
                    url: "/konwledgeBase/getAllKonwledge.action",
                    params: {
                        approvalStatus: 1,
                        viewType: 2,
                        typeId: this.currentType,
                        currentPage: this.currentPage,
                        pageSize: this.pageSize,
                        searchText: this.searchTitleText
                    }
                }).then(res =>{
                    this.knowledgeList = res.data.content.knowledgeList
                    this.total = res.data.content.totalNum
                    console.log(this.knowledgeList);
                })
            },
            // 按照点击率排序查询
            mostPorpularClick(){
                this.currentPage = 1
                this.currentViewType = 1
                this.$axios({
                    method: "post",
                    url: "/konwledgeBase/getAllKonwledge.action",
                    params: {
                        approvalStatus: 1,
                        viewType: 1,
                        typeId: this.currentType,
                        currentPage: this.currentPage,
                        pageSize: this.pageSize,
                        searchText: this.searchTitleText
                    }
                }).then(res =>{
                    this.knowledgeList = res.data.content.knowledgeList
                    this.total = res.data.content.totalNum
                    console.log(this.knowledgeList);
                })
            },
            // 问题详细描述点击
            detailsInfoClick(val){
                this.detailsInfoVisible = true
                this.$axios({
                    method: "post",
                    url: "/konwledgeBase/setKnowledgeViewCount.action",
                    params: {
                        id:val.knowledgeID
                    }
                }).then(res => {
                    this.findAllKnowledge()
                    // console.log(res)
                })

                // 获取 详细数据
                this.detailsInfo.problem = val.problemName
                this.detailsInfo.submit_time = val.submit_time
                this.detailsInfo.submit_user = val.submit_user
                this.detailsInfo.key_word = val.knowledgeLabel
                this.detailsInfo.resolution = val.knowledgeRes
                this.detailsInfo.view_count = val.view_count
                this.detailsInfo.name = val.knowledgeName
                this.detailsInfo.closureDir = val.closureDir
                this.detailsInfo.closureID = val.closureID
                this.detailsInfo.closure_sub_time = val.closure_sub_time
                this.detailsInfo.closure_sub_user = val.closure_sub_user

            },
            // 详情表单关闭
            infoDialogCancelClick() {
                this.detailsInfoVisible = false
                this.resetInfoDialog()
            },
            // 重置详情表单
            resetInfoDialog(){
                this.detailsInfo.problem = ''
                this.detailsInfo.submit_user = ''
                this.detailsInfo.submit_time = ''
                this.detailsInfo.key_word = ''
                this.detailsInfo.resolution = ''
                this.detailsInfo.view_count = 0
                this.detailsInfo.name = ''
                this.closureList = []
            },
            // 下载附件
            download(val) {
                // console.log('val',val)
                this.$confirm('确认下载该附件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method:'post',
                        url:'/fileManager/download2.action',
                        data:val,
                        // 二进制流文件，一定要设置成blob，默认是json
                        responseType: 'blob'
                    }).then((res)=> {
                        // console.log(res)
                        let link = document.createElement("a");
                        link.style.display = "none";
                        link.href = window.URL.createObjectURL(new Blob([res.data]));
                        // link.setAttribute("download",row.zurl.substring(row.zurl.lastIndexOf("/")+1));//文件名
                        link.setAttribute("download",val.name);//文件名
                        document.body.appendChild(link);
                        link.click();
                        URL.revokeObjectURL(link.href);
                        document.body.removeChild(link);
                    })
                }).catch((error) => {
                    console.log(error)
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    })
                })
            },
            // 重置筛选
            resetFilter(){
                // 重置
                this.currentViewType = -1
                this.currentType = -1
                this.currentPage = 1
                this.pageSize = 5
                this.findAllKnowledge()
            },
            // 点击查询
            searchClick(){
                this.currentViewType = -1
                // this.currentType = -1
                this.$axios({
                    method: "post",
                    url: "/konwledgeBase/getAllKonwledge.action",
                    params: {
                        approvalStatus: 1,
                        viewType: this.currentViewType,
                        typeId: this.currentType,
                        currentPage: this.currentPage,
                        pageSize: this.pageSize,
                        searchText: this.searchTitleText
                    }
                }).then(res => {
                    this.knowledgeList = res.data.content.knowledgeList
                    this.total = res.data.content.totalNum
                    console.log(this.knowledgeList);
                    // console.log('this.total',this.total);
                })
            }
        }
    }
</script>

<style scoped>
    .el-form-item{
        margin-bottom: 20px;
    }
    .buttonText{
        color: #2ac06d;
        cursor:pointer;
    }
    .title {
        height: 56px;
        line-height: 56px;
        vertical-align: center;
    }
    .title p {
        float: left;
        font-size: 30px;
    }
    .mapToolBar {
        min-height: 36px;
        line-height: 36px;
    }
    .toolBlock {
        float: left;
        margin-right: 10px;
    }
    .mapCanvas {
        float: left;
        margin-top: 10px;
        background: white;
        width: 100%;
    }
    .footer {
        position: absolute;
        bottom: 30px;
        margin-bottom: 10px;
        /*margin-top: 20px;*/
        float: left
    }
    .mapCanvas-content {
        background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.1) 2%, rgba(0, 0, 0, 0) 2%), linear-gradient(360deg, rgba(50, 0, 0, 0.1) 2%, rgba(0, 0, 0, 0) 2%);
        background-size: 50px 50px;
        background-repeat: repeat;
        background-position: center center;
    }
    .zoomBtn {
        display: inline;
        padding: 4px 5px;
        text-align: center;
        border-radius: 2px;
        line-height: 36px;
        background: rgb(64, 158, 255);
        cursor: pointer;
    }
    .main {
        height: 88vh;
        width: 100%;
        margin-top: 60px;
        padding:10px;
        overflow-x: hidden;
    }


    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .left-card {
        min-height: 100%;
        height: 100%;
    }
    .right-card {
        min-height: 100%;
        height: 100%;
    }
    .header_top{
        padding:10px 5px 15px 20px;
    }
    .header_botm{
         padding:10px 5px 15px 20px;
     }
    .left-card >>> .el-card__body {
        height: 100%;
    }
    .right-card >>> .el-card__body {
        height: 100%;
    }
</style>

<style>
    .el-tooltip__popper{
        max-width:50%
    }
</style>

